<!--
 * @Author: Wangtao
 * @Date: 2022-08-09 17:23:08
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-05 14:30:29
-->
<template>
  <el-tabs v-model="active" class="common-tabs" @tab-click="handleClick">
    <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  name: 'mcTabs',
  components: {},
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    activeName: {
      type: String,
      default: ''
    }
  },
  // ----------------生命周期-----------------------
  setup (props: any, contex) {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    const active : any= props.activeName || props.tabs[0].name

    onMounted(() => {
      if (active) {
        contex.emit('tabChange', active)
      }
    })

    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    // ----------------调用方法-----------------------
    return {
      active
    }
  }
})
</script>
<style lang="stylus" scoped>
.common-tabs
  :deep(.el-tabs__header)
    margin: 0
</style>